import EStyleSheet from 'react-native-extended-stylesheet';
import {articleItemWithChildrenStyles} from 'components/articles/article-item-with-children.styles';
import {
  clearIcon,
  inputWrapper,
  searchInput, searchInputWithMinHeight,
} from 'components/common-styles/search';
import {elevation1, HEADER_FONT_SIZE, MAIN_FONT_SIZE, SECONDARY_FONT_SIZE} from 'components/common-styles';
import {
  headerTitle,
  mainText,
  secondaryText,
} from 'components/common-styles';
import {Platform} from 'react-native';
import {SELECT_ITEM_HEIGHT} from 'components/select/select.styles';
import {splitViewStyles} from 'components/common-styles/split-view';
import {UNIT} from 'components/variables';

const spaceAround = {
  marginHorizontal: UNIT * 2,
  marginBottom: UNIT,
};

export const noProjectsIconSize = 240;


export default EStyleSheet.create({
  ...articleItemWithChildrenStyles,
  container: {
    flex: 1,
    backgroundColor: '$background',
  },
  content: {
    flex: 1,
  },
  ...splitViewStyles,
  header: {
    position: 'relative',
    zIndex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    height: SELECT_ITEM_HEIGHT,
    paddingBottom: UNIT / 4,
    paddingHorizontal: UNIT * 2,
    backgroundColor: '$background',
  },
  headerShadow: elevation1,
  headerTitle: {
    flex: 1,
  },
  headerTitleText: {...headerTitle, color: '$text'},
  headerButton: {
    flexGrow: 0,
  },
  headerLeftButton: {
    marginLeft: -UNIT,
    marginRight: UNIT,
  },
  headerRightButton: {
    marginTop: 2,
    marginLeft: UNIT,
    marginRight: -7,
    paddingLeft: UNIT / 2,
    paddingRight: UNIT,
  },
  separator: {
    marginLeft: UNIT * 3,
    backgroundColor: '$background',
  },
  itemChild: {
    marginTop: UNIT,
    marginLeft: -UNIT * 3,
    marginBottom: SELECT_ITEM_HEIGHT,
  },
  itemStar: {
    marginRight: UNIT * 0.75,
    paddingHorizontal: UNIT * 1.5,
    alignItems: 'center',
    justifyContent: 'center',
  },
  itemArticleIcon: {
    alignItems: 'flex-end',
    paddingHorizontal: UNIT / 1.5,
  },
  itemProject: {
    flex: 1,
    flexDirection: 'row',
    paddingHorizontal: UNIT * 2,
    alignItems: 'center',
  },
  itemArticle: {
    paddingLeft: UNIT * 5,
  },
  itemNoArticle: {
    justifyContent: 'center',
    height: SELECT_ITEM_HEIGHT,
    backgroundColor: '$background',
  },
  itemNoArticleText: {
    color: '$textSecondary',
  },
  itemDraft: {
    marginRight: UNIT,
    paddingLeft: UNIT * 2,
  },
  itemDraftDisabled: {
    opacity: 0.5,
  },
  itemProjectIcon: {
    width: UNIT * 3,
    marginLeft: -UNIT,
    alignItems: 'center',
    justifyContent: 'center',
    color: '$text',
  },
  itemProjectIconCollapsed: {
    marginTop: -UNIT / 4,
  },
  projectTitleText: {
    paddingLeft: UNIT,
    ...headerTitle,
    fontSize: HEADER_FONT_SIZE - 1,
    lineHeight: HEADER_FONT_SIZE,
    color: '$text',
    ...Platform.select({
      ios: {
        fontWeight: '600',
      },
      android: {
        fontWeight: '400',
      },
    }),
  },
  noArticlesIcon: {
    marginBottom: UNIT * 2,
  },
  listFooter: {
    marginVertical: UNIT * 4,
    alignItems: 'center',
    justifyContent: 'center',
  },
  searchPanelContainer: {
    ...spaceAround,
    ...inputWrapper,
    marginBottom: 0,
  },
  searchInput,
  searchInputWithMinHeight,
  clearIcon: clearIcon,
  link: {
    color: '$link',
  },
  actionBar: {
    ...spaceAround,
    flexDirection: 'row',
    height: UNIT * 4,
    marginTop: UNIT,
    paddingLeft: UNIT / 4,
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  actionBarButton: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  actionBarButtonText: {
    position: 'relative',
    top: 1,
    marginRight: UNIT,
    ...secondaryText,
    color: '$link',
  },
  noDrafts: {
    flexGrow: 4,
    alignItems: 'center',
    justifyContent: 'center',
  },
  noDraftsButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: UNIT * 2,
  },
  noDraftsButtonText: {
    ...mainText,
    marginLeft: UNIT / 2,
    color: '$link',
  },
  noProjects: {
    flexGrow: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: UNIT * 4,
  },
  noProjectsIcon: {
    marginTop: -noProjectsIconSize / 2,
    marginLeft: -UNIT * 4,
    marginBottom: UNIT * 2,
  },
  noProjectsMessage: {
    color: '$text',
    textAlign: 'center',
    fontSize: MAIN_FONT_SIZE + 2,
    fontWeight: '500',
  },
  noProjectsButton: {
    marginTop: UNIT * 4,
  },
  noProjectsButtonText: {...mainText, color: '$link'},
  noArticlesErrorIcon: {
    marginLeft: -UNIT * 4,
    marginBottom: -UNIT * 2,
  },
  manageFavoriteProjectsNote: {
    padding: UNIT * 2,
    textAlign: 'center',
    color: '$textSecondary',
  },
  manageFavoriteProjectsLink: {
    fontSize: SECONDARY_FONT_SIZE,
    color: '$link',
  },
  error: {
    color: '$error',
  },
});
